<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <meta charset="utf-8" />
    <title>电量统计</title>
    <script
      src="/js/jquery-2.0.0.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <th:block th:include="include :: header('百度ECharts')" />
    <script
      src="/js/echarts.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12 search-collapse">
          <form id="user-form">
            <div class="select-list">
              <ul>
                <li>
                  风机：<select name="fanId">
                    <option value="" style="display: none">请选择</option>
                  </select>
                </li>
                <li>
                  测项：<select name="funcitonId">
                    <option value="" style="display: none">请选择</option>
                  </select>
                </li>
                <li>
                  测点：<select name="pointId" lay-search="">
                    <option value="" style="display: none">请选择</option>
                  </select>
                </li>
                <li>
                  方向：<select name="target" lay-search="">
                    <option value="全部">全部</option>
                    <option value="X">X</option>
                    <option value="Y">Y</option>
                    <option value="Z">Z</option>
                  </select>
                </li>
                <li class="select-time">
                  <label>创建时间： </label>
                  <input
                    type="text"
                    class="time-input"
                    id="startDate"
                    placeholder="开始时间"
                    name="startDate"
                    style="width: 140px !important;"
                  />
                  <span>-</span>
                  <input
                    type="text"
                    class="time-input"
                    id="endDate"
                    placeholder="结束时间"
                    name="endDate"
                    style="width: 140px !important;"
                  />
                </li>
                <li>
                  <a
                    class="btn btn-primary btn-rounded btn-sm"
                    onclick="querySubmit()"
                    ><i class="fa fa-search"></i>&nbsp;查询</a
                  >
                </li>
              </ul>
            </div>
          </form>
        </div>
      </div>
      <div class="row" style="margin-top: 10px">
        <div class="col-sm-12">
          <div class="ibox float-e-margins">
            <div class="ibox-content">
              <div id="dayElectric" style="width: 100%; height: 500px"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="ibox float-e-margins">
            <div class="ibox-content">
              <div id="monthElectric" style="width: 100%; height: 500px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: layout-latest-js" />
    <script type="text/javascript">
      // layui 初始化
      layui.use("form", function () {
        var laydate = layui.laydate;

        //初始赋值
        laydate.render({
          elem: "#startDate",
          type: "datetime",
          value: getDate("before"),
          isInitValue: true,
        });

        //初始赋值
        laydate.render({
          elem: "#endDate",
          type: "datetime",
          value: getDate(),
          isInitValue: true,
        });
      });

      // 获取日期
      function getDate(type = "current") {
        let date = new Date();

        if (type === "before") {
          // 获取30天前的日期
          date.setTime(date.getTime() - 30 * 24 * 60 * 60 * 1000);
        }

        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        // 补零
        month = month < 10 ? "0" + month : month;
        day = day < 10 ? "0" + day : day;

        // 添加时分秒
        let time = type === 'current' ? '23:59:59' : '00:00:00';

        return year + '-' + month + '-' + day + ' ' + time;
      }

      var fandArr = [],
        functionArr = [],
        pointArr = [],
        chartType = null,
        targetArr = [];
      var chart1 = null,
        chart2 = null,
        chart3 = null,
        chart4 = null,
        chart5 = null,
        chart6 = null;

      // 初始化
      $(function () {
        let fanId = null,
          funcitonId = null,
          pointId = null,
          target = null;

        // 先绑定事件监听
        // 监听项目改变时
        $("[name='fanId']").on("change", function () {
          fanId = $(this).val();
          getCxData(fanId);
        });

        // 监听测项改变时
        $("[name='funcitonId']").on("change", function () {
          chartType = functionArr.find((item) => item.id == $(this).val()).type;
          funcitonId = $(this).val();
        });

        // 然后获取数据并手动触发change
        getPorjectData();
      });

      // 获取项目数据
      function getPorjectData() {
        $.ajax({
          url: "commom/getFanListForSensor",
          Type: "post",
          dataType: "json",
          async: false,
          success: (data) => {
            fandArr = [...data];
            let str = "";
            data.forEach((item) => {
              str += `<option value="${item.id}">${item.fanName}</option>`;
            });
            $("[name='fanId']").append(str);
            // 自动选择第一条数据并手动触发change事件
            if (data.length > 0) {
              $("[name='fanId']").val(data[0].id).change();
            }
          },
        });
      }

      // 获取测项数据
      function getCxData(fanId) {
        $.ajax({
          url: "commom/getFunctionListForFan",
          Type: "post",
          data: {
            fanId: fanId,
          },
          dataType: "json",
          async: false,
          success: (data) => {
            functionArr = [...data];
            let str = "";
            data.forEach((item) => {
              str += `<option value="${item.id}">${item.name}</option>`;
            });
            $("[name='funcitonId']").find("option").slice(1).remove();
            $("[name='funcitonId']").append(str);
            // 自动选择第一条数据并手动触发change事件
            if (data.length > 0) {
              $("[name='funcitonId']").val(data[0].id).change();
            }
          },
        });
      }

      $(document).ready(function () {
        $("#yearDetailedBtn").click(function () {
          location.href =
            "electricdetailed/electricdetailedFlag?dataToken=yearData";
        });
        $("#monthDetailedBtn").click(function () {
          location.href =
            "electricdetailed/electricdetailedFlag?dataToken=monthData";
        });
        $("#dayDetailedBtn").click(function () {
          location.href =
            "electricdetailed/electricdetailedFlag?dataToken=dayData";
        });
      });

      function querySubmit() {}
      // 日月年表的发电量数据
      var dayData = [];
      var monthData = [];
      var yearData = [];
      // 日月年表的发电量数据的最近日期
      var dayDateTime = [];
      var monthDateTime = [];
      var yearDateTime = [];
      $.ajax({
        url: "batteryleft/listBatteryleft",
        async: false,
        Type: "post",
        dataType: "json",
        success: function (data) {
          //=================获取日月年表的发电量数据===================
          // 循环获取日表中的发电量值
          for (var i = 0; i < data["dayData"].length; i++) {
            dayData[i] = data["dayData"][i].power_generation;
          }
          // 循环获取月表中的发电量值
          for (var i = 0; i < data["monthData"].length; i++) {
            monthData[i] = data["monthData"][i].power_generation;
          }
          // 循环获取年表中的发电量值
          for (var i = 0; i < data["yearData"].length; i++) {
            yearData[i] = data["yearData"][i].power_generation;
          }
          //=================获取日月年表的发电量最近时间===================
          // 循环获取日表中的发电量最近时间
          for (var i = 0; i < data["dayData"].length; i++) {
            dayDateTime[i] = data["dayData"][i].createTime.substring(0, 10);
          }
          // 循环获取月表中的发电量最近时间
          for (var i = 0; i < data["monthData"].length; i++) {
            monthDateTime[i] = data["monthData"][i].createTime.substring(0, 10);
          }
          // 循环获取年表中的发电量最近时间
          for (var i = 0; i < data["yearData"].length; i++) {
            yearDateTime[i] = data["yearData"][i].createTime.substring(0, 10);
          }
        },
      });
      option1 = {
        title: {
          text: "最大值统计",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 20,
          },
          top: "3%",
          left: "10%",
        },
        backgroundColor: "#0f375f",
        grid: {
          top: "25%",
          bottom: "10%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        // legend: {
        //   data: ["发电量折线", "发电量"],
        //   top: "15%",
        //   textStyle: {
        //     color: "#ffffff",
        //   },
        // },
        xAxis: {
          data: dayDateTime,
          axisLine: {
            show: true, //隐藏X轴轴线
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ebf8ac", //X轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              color: "#01FCE3",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "m/s2",
            nameTextStyle: {
              color: "#ebf8ac",
            },
            splitLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ebf8ac",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF",
              },
            },
          },
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#ebf8ac",
            },
            position: "right",
            splitLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#ebf8ac",
              },
            },
          },
          {
            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
              },
            },
          },
        ],
        series: [
          {
            name: "电量曲线",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "#058cff",
            },
            lineStyle: {
              color: "#058cff",
            },
            areaStyle: {
              color: "rgba(5,140,255, 0.2)",
            },
            data: dayData,
          },
          {
            name: "发电量",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#00FFE3",
                  },
                  {
                    offset: 1,
                    color: "#4693EC",
                  },
                ]),
              },
            },
            data: dayData,
          },
        ],
      };

      option2 = {
        title: {
          text: "平均值统计",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 20,
          },
          top: "3%",
          left: "10%",
        },
        backgroundColor: "#0f375f",
        grid: {
          top: "25%",
          bottom: "10%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        // legend: {
        //   data: ["发电量折线", "发电量"],
        //   top: "15%",
        //   textStyle: {
        //     color: "#ffffff",
        //   },
        // },
        xAxis: {
          data: monthDateTime,
          axisLine: {
            show: true, //隐藏X轴轴线
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ebf8ac", //X轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              color: "#01FCE3",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "m/s2",
            nameTextStyle: {
              color: "#ebf8ac",
            },
            splitLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ebf8ac",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF",
              },
            },
          },
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#ebf8ac",
            },
            position: "right",
            splitLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#ebf8ac",
              },
            },
          },
          {
            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
              },
            },
          },
        ],
        series: [
          {
            name: "电量曲线",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "#058cff",
            },
            lineStyle: {
              color: "#058cff",
            },
            areaStyle: {
              color: "rgba(5,140,255, 0.2)",
            },
            data: monthData,
          },
          {
            name: "发电量",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#00FFE3",
                  },
                  {
                    offset: 1,
                    color: "#4693EC",
                  },
                ]),
              },
            },
            data: monthData,
          },
        ],
      };

      option3 = {
        title: {
          text: "近年发电量统计",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 20,
          },
          top: "3%",
          left: "10%",
        },
        backgroundColor: "#0f375f",
        grid: {
          top: "25%",
          bottom: "10%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        legend: {
          data: ["发电量折线", "发电量"],
          top: "15%",
          textStyle: {
            color: "#ffffff",
          },
        },
        xAxis: {
          data: yearDateTime,
          axisLine: {
            show: true, //隐藏X轴轴线
          },
          axisTick: {
            show: true, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ebf8ac", //X轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              color: "#01FCE3",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "m/s2",
            nameTextStyle: {
              color: "#ebf8ac",
            },
            splitLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ebf8ac",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF",
              },
            },
          },
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#ebf8ac",
            },
            position: "right",
            splitLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#ebf8ac",
              },
            },
          },
          {
            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
              },
            },
          },
        ],
        series: [
          {
            name: "电量曲线",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "#058cff",
            },
            lineStyle: {
              color: "#058cff",
            },
            areaStyle: {
              color: "rgba(5,140,255, 0.2)",
            },
            data: yearData,
          },
          {
            name: "发电量",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#00FFE3",
                  },
                  {
                    offset: 1,
                    color: "#4693EC",
                  },
                ]),
              },
            },
            data: yearData,
          },
        ],
      };

      // 瞬时发电率折线图PowerGR
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("dayElectric"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option1);
      // 风速折线图windSpeed
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("monthElectric"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option2);
      // 瞬时发电率折线图PowerGR
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("yearElectric"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option3);
    </script>
  </body>
</html>
